<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #ban {
        width: 500px;
        height: 100px;
        border: 2px solid black;
        display: block;
        margin-bottom: 20px;
      }
      li {
        font: 15px 楷体;
        list-style: none;
        margin: 10px 0;
      }
      a {
        text-decoration: none;
        margin-left: 100px;
      }
    </style>
  </head>
  <body>
    <h3>我的留言板</h3>

    <hr />
    <textarea id="ban"></textarea>
    <button id="submit">提交留言</button>
    <button id="clear">清除所有留言</button>
    <h3>留言区</h3>
    <hr />
    <ul></ul>
    <script>
      let submit = document.getElementById("submit");
      let clear = document.getElementById("clear");
      let ban = document.querySelector("#ban");
      let ul = document.querySelector("ul");
    
      submit.onclick = function () {
        if (ban.value === "") {
          alert("你没有输入内容");
          return false;
        } else {
          let li = document.createElement("li");
          li.innerHTML = ban.value + "<a href='#'>删除</a>";
          ul.insertBefore(li, ul.firstElementChild);
          ban.value = "";
            let as = document.querySelectorAll("a");
          for (let i = 0; i < as.length; i++) {
            as[i].onclick = function () {
              //删除的是li 当前a所在的li    this.parentNode
               ul.removeChild(this.parentNode);
            };
          }
        }
      };
    </script>
  </body>
</html>
